<style lang="less">
  .recommender-info{
    padding:10px 15px;
    display: block;
    color:#333;
    border-bottom: 1px solid #ccc;
    img{
      vertical-align: super;
    }
  }
  .recommender-tag{
    margin-left: 8px;
    padding:3px 10px;
    font-size: 12px;
    color:#fff;
    display: inline-block;
    background: #699f00;
    border-radius: 8px;
  }
  .recommender-name{
    display: inline-block;
    position: relative;
    margin-left: 5px;
    span{
      display: block;
      &.recommender-bio{
        font-size: 12px;
        color:#ccc;
        margin-top: 10px;
      }
    }
  }
</style>
<template>
  <div class="recommenders">
   <header class="header">
      <a @click="prevPage"><i class="fa fa-arrow-left"></i></a>
      <span>推荐者</span>
    </header>
    <ul class="recommenders-list">
      <router-link :to="/editor-detail/+ recommender.id" class="recommender-info" v-for="recommender in recommenders">
        <img :src="imgUrl+'/public-pic?img='+recommender.avatar" class="img-circle" width="30" height="30">
        <div class="recommender-name">
          <span>{{recommender.name}}<i class="recommender-tag">{{recommender.title}}</i></span>
          <span class="recommender-bio">{{recommender.bio}}</span>
        </div>
      </a>
    </ul>
  </div>
</template>
<script type="text/javascript">
import {mapState} from 'vuex'
  export default {
    methods:{
      prevPage() {
        this.$router.go(-1)
      }
    },
    computed:mapState({
      imgUrl: state => state.imgUrl,
      recommenders:state => state.recommenders
    }),
    created() {
      let id = this.$route.params.id;
      this.$store.dispatch('getData',{
        url:'/api/4/story/'+ id + '/recommenders',
        mutation: 'GET_RECOMMENDERS'
      });
      this.setDocumentTitle('推荐者')
    }
  }
</script>
